<template>
  <div style="height:100%;width:100%;">
    <section class="loginBg">
      <div class="w">
        <div class="loginPanel">
          <p>广电乐现云课堂</p>
          <p>后台管理平台</p>
          <form action="">
            <div class="loginCon">
              <p><i class="userNameSpan"></i><label class="placeholder"><span :style="{display:username?'none':'inline'}">用户名</span><input type="text" name="userName" v-model="username"/></label></p>
              <p><i class="userpsdSpan"></i><label class="placeholder"><span :style="{display:password?'none':'inline'}">密码</span><input type="password" name="userpsd" v-model="password"/></label></p>
              <p><a href="javaScript:void(0)" class="getPsd"></a></p>
              <p><input type="text" v-bind:class="ele.codeEle" name="code" v-model="code"><span class="getCode"><canvas width="84px" height="45px"  @click="changeCode()" id="mycanvas">您的浏览器不支持canvas，请换个浏览器试试</canvas></span></p>
            </div>
            <p class="aLogin"><a href="javaScript:void(0);" @click="login" >登录</a></p>
          </form>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
import config from '@/config'

export default {
  name: 'login',
  data () {
    return {
      username: "",
      password: "",
      code: "",
      timestamp: 0,
      getCode:"",
      ele:{
        codeEle:""
      },
    }
  },
  computed: {
    // verifyCode: function () {
    //   return config.host + 'AgentApi/Login/verify?random=' + this.timestamp
    // }
  },
  methods: {
    login() {
      console.log(this)
      console.log(this.username)
      console.log(this.password)
      let username = this.username
      let password = this.password
      let code = this.code;

      if(this.code!=this.getCode){
        this.tip("验证码错误");
        this.ele.codeEle="error";
        this.changeCode();
        return false;
      }else{
        this.ele.codeEle="";
      }
      // 异步请求 
      // var data = new FormData()
      // data.append('username', username)
      // data.append('password', password)
      // data.append('code', code)
      // data.append('PHPSESSID', localStorage.PHPSESSID)
      // var data = {}
      // data.username = username
      // data.password = password
      // data.code = code 
      // data.PHPSESSID = localStorage.PHPSESSID

      var data = 'username='+username
        +'&password='+password
        +'&code='+code
        +'&PHPSESSID='+localStorage.PHPSESSID

      var _this = this
      console.log(data);
      console.log(document.cookie)
      axios.post(config.host+'AgentApi/Login/login',data, { 
            headers: {'Content-Type': 'application/x-www-form-urlencoded',
            // xsrfCookieName: 'PHPSESSID'
            // crossDomain: true,
            withCredentials: true
          } 
        })
        .then(function (response) {
          console.log(response)

          console.log(response.data)
          // let data = JSON.parse(response.data)
          let data = (response.data)
          if (data.result==0){
            localStorage.PHPSESSID = data.data
            localStorage.isLogin = true
            localStorage.backUserName = data.backUserName
            // _this.$router.replace('/baseServiceOrderSearch')
            _this.$router.push({ path: 'baseServiceOrderSearch' })
            window.location.reload();
          } else {
            _this.changeCode();
            _this.tip(data.info);
          }
          // localStorage.username = username
          // localStorage.password = password
        })
        .catch(function (error) {
          console.log(error)
        })

    },
    changeCode: function () {
      //this.timestamp = new Date().getTime();
      var mycanvas=document.getElementById('mycanvas');
      var cxt=mycanvas.getContext('2d');
      cxt.fillStyle='#F3FBFE';
      cxt.fillRect(0,0,90,40);
      for(var j=0;j<8;j++){
        var r = Math.floor(Math.random() * (180 - 40) + 40);
        var g = Math.floor(Math.random() * (180 - 40) + 40);
        var b = Math.floor(Math.random() * (180 - 40) + 40);
        cxt.strokeStyle="rgb(" + r + "," + g + "," + b + ")";
        cxt.beginPath();
        cxt.moveTo(Math.floor(Math.random()*90),Math.floor(Math.random()*40));
        cxt.lineTo(Math.floor(Math.random()*90),Math.floor(Math.random()*40));
        cxt.lineWidth=0.5;
        cxt.closePath();
        cxt.stroke();
      }
      var str="abcdefghijklmnopqrstuvwxyz0123456789";
      var arr=str.split("");
      var validate="";
      var ranNum;
      for(var k=0;k<4;k++){
        ranNum=Math.floor(Math.random()*36);
        validate+=arr[ranNum];
      }
      for(var i = 1; i <= 4; i++) {
        cxt.font = Math.floor(Math.random() * (40 - 20) + 20)+"px SimHei";
        var ra = Math.floor(Math.random() *(160 - 50) + 50);
        var ga = Math.floor(Math.random() *(160 - 50) + 50);
        var ba = Math.floor(Math.random() *(160 - 50) + 50);
        cxt.fillStyle ="rgb(" + ra + "," + ga + "," + ba + ")";
        var x = 80 / 5 * i;
        var y = 42 / 2;
        var deg = Math.floor(Math.random() * (30 +30) -30); 
        cxt.translate(x, y);
        cxt.rotate(deg * Math.PI / 180);
        cxt.fillText(validate[i-1], 0, 5);
        cxt.rotate(-deg * Math.PI / 180);
        cxt.translate(-x, -y);
      }
      this.getCode=validate;
    },
    tip:function(content){
      var tooltip=document.getElementsByClassName("tooltip");
      if (tooltip.length > 0) {
         return false;
      }
      var pElement = document.createElement("div");
      pElement.className="tooltip fadeIn";
      var messageNode = document.createTextNode(content);
      pElement.appendChild(messageNode);
      document.body.appendChild(pElement);
      setTimeout(function () {
          setTimeout(function () {
              document.body.removeChild(pElement);
          }, 300);
      }, 1000);
    },
  },
  mounted:function(){
    this.$nextTick(function(){
       this.changeCode();
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*  .loginBg{width:100%;height:100%;background:url("../../static/img/loginBg.jpg") center no-repeat; background-size:100% 100%;}
  .loginBg .w{padding-top:262px;padding-left:620px;}
  .loginPanel{width:405px;}
  .loginPanel>p{ height:33px;line-height:33px; text-align:center;font-size:27px; letter-spacing:20px; color:#fff;}
  .loginPanel form{background:#fff; border-radius: 10px;}
  .loginPanel div.loginCon{width:405px;padding:25px 0px 0px 0px;margin-top:28px;}
  .loginPanel div.loginCon p{margin-top:18px;width:362px;height:43px; line-height: 43px; margin:0 auto 18px;}
  .loginPanel div.loginCon p:nth-child(2){margin:0 auto;}
  .loginPanel div.loginCon p:nth-child(3){margin:0;height:54px;line-height: 54px;}
  .loginPanel div.loginCon input[type="text"],.loginPanel div.loginCon input[type="password"]{font-size:13px;background:#EFEFEF;border:none;margin-bottom:18px;}
 .loginPanel div.loginCon input[name="userName"]{ width:100%;height:100%; padding-left:65px; background:#EFEFEF url("../../static/img/nameIcon.png") 15px center no-repeat;}
  .loginPanel div.loginCon input[name="userpsd"]{ width:100%;height:100%; padding-left:65px; background:#EFEFEF url("../../static/img/psdIcon.png") 15px center no-repeat;}
  .loginPanel div.loginCon input[name="code"]{ float:left; width:142px;height:100%; padding-left:12px; }
  .loginPanel div.loginCon .getPsd{ float:right; color:#E0E0E0;font-size:14px;}
  .loginPanel div.loginCon .getCode{float:left;width:84px;height:43px;background:#fff;padding-top:0px;}
  .loginPanel div.loginCon .getCode canvas{display: inline-block;border:0;cursor: pointer;}
  .loginPanel .aLogin{ height:58px; border-bottom-left-radius: 10px;border-bottom-right-radius:10px;background:#3926B7;}
  .loginPanel .aLogin a{ display:inline-block; width:100%;height:100%;line-height: 58px; text-align: center; border-bottom-left-radius: 10px;border-bottom-right-radius:10px;color:#fff; font-size:18px;letter-spacing:26px;}*/
  /*vue中样式*/
  /*input:-webkit-autofill{background-color:#fff!important;}*/
</style>
